import React, { Component } from 'react'
import './index.css'
import {nanoid} from 'nanoid';

export default class Header extends Component {
    handleKeyUp = (event) => {
        const {addTodos} = this.props;
        if(event.keyCode !== 13){
            return;
        }
        if(event.target.value.trim() == ""){
            alert("输入内容不能为空");
            return;
        }
        const todoObject = {id:nanoid(),name:event.target.value,done:false}
        addTodos(todoObject);
        event.target.value = "";
    }
    render() {
        const {addTodos} = this.props;
        return (
            <div className="todo-header">
                <input type="text" onKeyUp={this.handleKeyUp} placeholder="请输入你的任务名称，按回车键确认" />
            </div>
        )
    }
}
